<template>
	<view>
		<!-- <view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				活动时间
			</view>
			<view class="subtit">设置活动的开始时间</view>
			<view class="time">
				<uni-datetime-picker :border="false" class="" type="datetime" v-model="params.beginTime" :hide-second="true" />
			</view>
		</view> -->
	<!-- 	<view class="block_1" v-if="params.lineType == 2">
			<view class="tit">
				<span style="color: red">*</span>
				活动是否需要签到
			</view>
			<view class="subtit">选择活动是否需要签到</view>
			<view class="flex">
				<view class="flex select_as" @click="changeSign('0')">
					<image v-if="params.sign == '0'" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="tss" :class="params.sign == '0' ? 'a_tss' : ''">非签到活动</view>
				</view>
				<view class="flex select_as" style="margin-left: 150rpx" @click="changeSign('1')">
					<image v-if="params.sign == '1'" src="/static/select_a.png" mode=""></image>
					<image v-else src="/static/select.png" mode=""></image>
					<view class="tss" :class="params.sign == '1' ? 'a_tss' : ''">签到活动</view>
				</view>
			</view>
		</view>
		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				选择城市
			</view>
			<view class="block flex_jc_sb" @click="gochangecity">
				<view class="b_l">城市</view>
				<view class="b_r" :style="{ color: params.city ? '#1b1b1b' : '#d1d1d6' }">{{ params.city ? params.city : '请选择城市' }}</view>
			</view>
		</view> -->

		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				活动封面
			</view>
			<view class="upload flex_jc_sb">
				<view class="up_1" v-if="params.imgFace">
					<image @click="$previewImage([params.imgFace])" class="img" :src="params.imgFace" mode="aspectFill"></image>
					<view class="ads" @click="chooseFENGMIAN('imgFace')">重新上传</view>
				</view>
				<view v-else class="up_1 flex_jc_cent" @click="chooseFENGMIAN('imgFace')">
					<view class="">
						<image src="/static/xj.png" mode=""></image>
						<view class="">点击上传</view>
					</view>
				</view>
			</view>
		</view>

		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				活动名称
			</view>
			<view class="subtit">填写活动名称，限20个字</view>
			<view class="input">
				<input v-model="params.name" placeholder-class="input_class" type="text" placeholder="请输入" maxlength="20" />
			</view>
		</view>
		<!-- <view class="block_1" v-if="params.lineType == 1">
			<view class="tit">
				<span style="color: red">*</span>
				活动平台
			</view>
			<view class="subtit">线上讨论通过腾讯会议进行</view>
			<view class="input">
				<input v-model="params.platform" placeholder-class="input_class" type="text" placeholder="腾讯会议（由发起人在活动前发布到活动群）" />
			</view>
		</view> -->
<!-- 		<view class="" v-if="params.lineType == 2">
			<view class="block_1">
				<view class="tit">
					<span style="color: red">*</span>
					地图导航
				</view>
				<view class="subtit">选择现场地址的导航位置</view>
				<view class="input_flex flex" @click="selectDW">
					<view class="t2" v-if="params.address">
						{{ params.address }}
					</view>
					<view class="flex" v-else>
						<uni-icons type="location-filled" size="24" color="#75613E"></uni-icons>
						<view class="t1">请选择</view>
					</view>
				</view>
			</view>
			<view class="block_1">
				<view class="tit">
					<span style="color: red">*</span>
					现场地址
				</view>
				<view class="subtit">填写展示在活动页面的地址(不超过30个字)</view>
				<view class="input">
					<input v-model="params.addressInfo" placeholder-class="input_class" type="text" placeholder="请输入" maxlength="30" />
				</view>
			</view>
		</view>

		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				报名人数上限
			</view>
			<view class="subtit">设置报名上限人数，最高上限人数15人</view>
			<view class="numbers">
				<uni-number-box v-model="params.maxCount" :min="3" :max="15"></uni-number-box>
			</view>
		</view>

		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				活动群二维码
			</view>
			<view class="subtit">上传活动群二维码</view>
			<view class="upload flex_jc_sb">
				<view class="up_2" v-if="params.imgQr">
					<image @click="$previewImage([params.imgQr])" class="img" :src="params.imgQr" mode="aspectFill"></image>
					<view class="ads" @click="chooseFENGMIAN('imgQr')">重新上传</view>
				</view>
				<view v-else class="up_2 flex_jc_cent" @click="chooseFENGMIAN('imgQr')">
					<view class="">
						<image src="/static/xj.png" mode=""></image>
						<view class="">点击上传</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				活动简介
			</view>
			<view class="subtit">填写活动简介内容，限2000字</view>
			<view class="input">
				<textarea v-model="params.info" placeholder-class="input_class" type="text" placeholder="请输入" maxlength="2000" />
			</view>
			<view class="imglist">
				<view class="items" v-for="(item, index) in params.imgs" :key="index">
					<image @click="$previewImage(params.imgs, index)" :src="item" mode="aspectFill"></image>
					<image src="/static/close.png" mode="" class="icon" @click.native.stop="removeimg(index)"></image>
				</view>
				<view class="items1 flex_jc_cent" @click="uploads">
					<uni-icons type="plusempty" color="#979797"></uni-icons>
				</view>
			</view>
		</view>

		<view class="block_1">
			<view class="tit">
				<span style="color: red">*</span>
				注意事项
			</view>
			<view class="subtit">填写活动注意事项，限2000字</view>
			<view class="input">
				<textarea v-model="params.remark" placeholder-class="input_class" type="text" placeholder="请输入" maxlength="2000" />
			</view>
		</view>
		<view class="bottom_login">
			<image src="/static/blogin.png" mode=""></image>
			<view class="text">— 让生活在这里发生 —</view>
		</view>
		<view class="btn_zw"></view>
		<view class="bottom_btns">
			<view class="cont">
				<view class="onebtns" :class="btnactive ? 'active' : ''" @click="handleSend(1)">
					<view>确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { chooseAndUploadImage } from '@/utils/upload';
import { addList, infoList, editList } from '@/api/branch/template.js';
const { proxy } = getCurrentInstance();
const sendType = ref('');
const params = reactive({
	type: '', //活动类型
	lineType: '', //1线上 2线下
	beginTime: undefined, //活动开始时间
	sign: '0', //是否签到
	platform:'腾讯会议',
	city: '', //所在城市
	imgFace: '', //封面图
	name: '', //活动名称
	address: '', //活动地址
	addressInfo: '', //活动地址详情
	longitude: 0, //经度
	latitude: 0, //纬度
	maxCount: 3, //最大活动人数
	imgQr: '', //群二维码
	info: '', //活动简介
	imgs: [],
	infoImg: '', //活动图片
	remark: '' //注意事项
});
const validateForm = (formData) => {
	// 定义一个数组来收集错误信息
	const errors = [];
	// 3. 校验城市
	if (!formData.city) {
		errors.push('请选择城市');
	}
	// 4. 校验活动封面
	if (!formData.imgFace) {
		errors.push('请上传活动封面');
	}
	// 2. 校验活动名称
	if (!formData.name.trim()) {
		errors.push('请输入活动名称');
	} else if (formData.name.length > 20) {
		errors.push('活动名称不能超过20个字');
	}
	// 8. 根据线上/线下类型，校验不同的字段
	if (formData.lineType === 1) {
		// 线上活动，这里可以根据实际需求添加校验，例如是否填写了活动平台
		// 目前你的模板里线上活动平台是个提示性输入框，非必填，所以可以不校验
		// if (!formData.platform) { errors.push('请填写活动平台'); }
	} else if (formData.lineType === 2) {
		// 线下活动
		if (!formData.address) {
			errors.push('请选择地图导航位置');
		}
		if (!formData.addressInfo.trim()) {
			errors.push('请填写现场地址');
		} else if (formData.addressInfo.length > 30) {
			errors.push('现场地址不能超过30字');
		}
	}
	// 6. 校验活动群二维码
	if (!formData.imgQr) {
		errors.push('请上传活动群二维码');
	}
	// 5. 校验活动简介
	if (!formData.info.trim()) {
		errors.push('请填写活动简介');
	} else if (formData.info.length > 1000) {
		errors.push('活动简介不能超过1000字');
	}
	// 7. 校验注意事项
	if (!formData.remark.trim()) {
		errors.push('请填写注意事项');
	} else if (formData.remark.length > 1000) {
		errors.push('注意事项不能超过1000字');
	}

	// 如果有错误信息，返回错误数组；否则返回 null 表示校验通过
	return errors.length > 0 ? errors : null;
};
const btnactive = computed(() => {
	// 基本思路：检查几个核心的必填字段是否已填写
	// 这里的逻辑可以根据你的需求调整，不必像校验函数那么严格
	// 目的是给用户一个直观的反馈，按钮亮了就代表基本信息填得差不多了可以提交了
	const hasBasicInfo = params.name.trim() 
	const hasImages = params.imgFace
	const hasText = params.info.trim() && params.remark.trim() && params.platform.trim()
	// let hasLocation = true;
	// if (params.lineType === 2) {
	// 	hasLocation = params.address && params.addressInfo.trim();
	// }
	// 当所有核心条件都满足时，btnactive 为 true
	return hasBasicInfo && hasImages && hasText 
});
// sendType set就是修改
onLoad((option) => {
	sendType.value = option.sendType || '';
		if(sendType.value == 'set'){
			uni.setNavigationBarTitle({
				title:'修改模版'
			})
		}
	params.type = uni.getStorageSync('activity').type;
	params.lineType = uni.getStorageSync('activity').lineType;
	// 修改  草稿箱修改，我的活动修改
	if (option.sendType == 'set') {
		infoList({ id: option.id }).then((res) => {
			if (res.code == 200) {
				Object.assign(params, res.data);
				if(res.data.infoImg){
					params.imgs = res.data.infoImg.split(',');
				}
			}
		});
	}
});
onShow(() => {
	params.city = uni.getStorageSync('city').value;
});
const changeSign = (e) => {
	params.sign = e;
};
// 选择城市
const gochangecity = () => {
	uni.navigateTo({
		url: `/mypage/changecity?type=1`
	});
};
// 上传
const chooseFENGMIAN = async (e) => {
	try {
		params[e] = await chooseAndUploadImage({
			count: 1,
			uploadText: '上传中...'
		});
	} catch (err) {
		console.error('头像上传失败：', err);
	}
};
const selectDW = () => {
	uni.chooseLocation({
		success: function (res) {
			params.address = res.name;
			params.addressInfo = res.address;
			params.longitude = res.longitude;
			params.latitude = res.latitude;
		}
	});
};

const uploads = async () => {
	try {
		params.imgs = await chooseAndUploadImage({
			count: 9,
			uploadText: '上传中...'
		});
	} catch (err) {
		console.error('头像上传失败：', err);
	}
};
const removeimg = (index) => {
	params.imgs.splice(index, 1);
};
const popupRef = ref(null);
// 0草稿 1发布
const handleSend = (type) => {
	console.log('1111');
	params.send = type;
	if(params.imgs.length!=0){
		params.infoImg = params.imgs.join(',');
	}
	// 如果是发布操作 (type === 1)，则进行校验
	// if (type === 1) {
	// 	const validationErrors = validateForm(params);
	// 	if (validationErrors) {
	// 		// 校验失败，显示第一个错误信息
	// 		uni.showToast({
	// 			title: validationErrors[0],
	// 			icon: 'none'
	// 		});
	// 		return;
	// 	}
	// }
	console.log('22222');
	// 代码能执行到这里，说明要么是保存草稿，要么是发布且校验通过
	proxy.$throttling(() => {
		if(sendType.value == 'set'){
			editList(params).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功'
					});
					setTimeout(() => {
						uni.removeStorageSync('activity');
						uni.removeStorageSync('city');
						uni.$emit('update',{msg:'页面更新'})
						uni.navigateBack()
					}, 500);
				}
			});
		}else{
			addList(params).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功'
					});
					setTimeout(() => {
						uni.removeStorageSync('activity');
						uni.removeStorageSync('city');
						uni.$emit('update',{msg:'页面更新'})
						uni.switchTab({
							url:'/pages/user/user'
						})
					}, 500);
				}
			});
		}


	});
};
const open = (type) => {
	// popupRef.value.open();
};
const close = () => {
	popupRef.value.close();
};
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.popup {
	width: 620rpx;
	height: 380rpx;
	background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 32rpx 30rpx;
	box-sizing: border-box;
	.icon {
		display: block;
		text-align: right;
	}
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #4e3f23;
		text-align: center;
	}
	.pop_content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #b19561;
		text-align: center;
		margin: 40rpx auto;
	}
	.pop_btn {
		width: 280rpx;
		height: 72rpx;
		background: #d8c6a7;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		text-align: center;
		line-height: 72rpx;
		margin: 0 auto;
	}
}
.bottom_login {
	text-align: center;
	margin: 50rpx auto 20rpx;
	padding-bottom: 1rpx;
	image {
		width: 204rpx;
		height: 64rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8f8f8b;
		text-align: center;
		margin-top: 10rpx;
	}
}
.input_class {
	color: #d1d1d6;
}
.block_1 {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 20rpx 20rpx 30rpx 20rpx;
	box-sizing: border-box;
	.numbers {
		margin-top: 18rpx;
		width: 670rpx;
	}
	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #1b1b1b;
	}
	.subtit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8f8f8b;
		margin-top: 10rpx;
	}
	.time {
		margin-top: 18rpx;
		width: 670rpx;
		height: 80rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
		padding-left: 10rpx;
		box-sizing: border-box;
		.uni-date {
			.uni-date-x {
				background: none;
				height: 80rpx;
				line-height: 80rpx;
			}
			.uni-date__x-input {
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
	.select_as {
		margin-top: 20rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
		.tss {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
		}
		.a_tss {
			color: #75613e;
		}
	}
	.block {
		margin-top: 18rpx;
		width: 670rpx;
		height: 80rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		.b_l {
			font-size: 28rpx;
			color: #1b1b1b;
		}
		.b_r {
			font-size: 28rpx;
			color: #d1d1d6;
		}
	}
	.upload {
		margin-top: 18rpx;
		.up_1 {
			width: 140rpx;
			height: 190rpx;
			background: #f7f7f7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			position: relative;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #8f8f8b;
			.img {
				width: 140rpx;
				height: 190rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
			.ads {
				width: 140rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 0rpx 0rpx 8rpx 8rpx;
				position: absolute;
				bottom: 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				text-align: center;
				line-height: 40rpx;
			}
		}
		.up_2 {
			width: 190rpx;
			height: 190rpx;
			background: #f7f7f7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			position: relative;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #8f8f8b;
			position: relative;
			.img {
				width: 190rpx;
				height: 190rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
			.ads {
				width: 190rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 0rpx 0rpx 8rpx 8rpx;
				position: absolute;
				bottom: 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				text-align: center;
				line-height: 40rpx;
			}
		}
	}
	.input {
		margin-top: 18rpx;
		width: 670rpx;
		background: #f7f7f7;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		input {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
		textarea {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			min-height: 200rpx;
			line-height: 1.5;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	.input_flex {
		margin-top: 18rpx;
		width: 670rpx;
		height: 80rpx;
		background: #f7f7f7;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0rpx 0rpx 0rpx 10rpx;
		box-sizing: border-box;
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #d1d1d6;
		}
		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
		}
	}
	.imglist {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.items {
			width: 80rpx;
			height: 80rpx;
			margin-right: 10rpx;
			position: relative;
			image {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
			}
			.icon {
				width: 24rpx;
				height: 24rpx;
				top: -8rpx;
				right: -8rpx;
				position: absolute;
				z-index: 1;
			}
		}
		.items1 {
			width: 80rpx;
			height: 80rpx;
			border-radius: 6rpx;
			background: #f7f8f6;
		}
	}
}
</style>
